<template>
    <div class="three-step-container">
        <el-steps :active="activeStep" finish-status="success" :simple="true">
            <el-step title="生成视频" description="" />
            <el-step title="视频发布" description="" />
        </el-steps>

        <div class="step-content">
            <div v-if="activeStep === 0" class="step-one">
                <div class="left-content">
                    <div class="area-container center-area">
                        <div class="center-content">
                            <!-- 输入条件是选择图片和输入prompt -->
                            <div class="img-con">
                                <div class="img-sec">
                                    <div class="section-title">选择图片素材</div>
                                    <div class="upload-img" @click="chooseImgMaterial">
                                        <el-icon size="24" v-if="!formData.imgMaterial">
                                            <Plus />
                                        </el-icon>
                                        <img v-if="formData.imgMaterial" :src="formData.imgMaterial"
                                            style="width: 100%; height: 100%;">
                                    </div>
                                </div>
                                <div class="param-sec">
                                    <div class="section-title">分辨率</div>
                                    <el-select v-model="formData.resolution" placeholder="请选择分辨率" popper-class="resolution-select">
                                        <el-option v-for="item in resolutionOptions" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                    <div class="section-title">描述文字</div>
                                    <textarea v-model="formData.description" class="description-input"
                                        placeholder="请输入描述文字..." rows="4"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-content">
                    <h4>说明</h4>
                    <p>图生视频模型，让静态图像变为动态视频。具备强大的指令遵循能力，支持大幅度复杂运动、现实物理规律还原，生成的视频呈现丰富的艺术风格及影视级画面质感。</p>
                    <br>
                    <h4>生成耗时</h4>
                    <p>图生视频耗时较长，turbo模型大约需要3-5分钟，plus模型则需7-10分钟。实际耗时取决于排队任务数量和网络状况，请您在获取结果时耐心等待。</p>
                    <br>
                    <h4>描述部分</h4>
                    <p>
                        输入文本提示词。支持中英文，长度不超过800个字符，每个汉字/字母占一个字符，超过部分会自动截断。示例值：一只小猫在草地上奔跑。
                    </p>
                </div>
            </div>

            <div v-if="activeStep === 1" class="step-two">
                <!-- 内容展示区域 -->
                <el-row :gutter="20">
                    <!-- 只有一个视频时 -->
                    <el-col v-if="resultVideo.length === 1" :span="24" style="">
                        <!-- <video :src="resultVideo[0].url" class="single-video" /> -->
                        <div class="single-video">
                            <DouyinShow :item="resultVideo[0]" />
                        </div>
                    </el-col>

                    <!-- 有两个视频时 -->
                    <template v-else-if="resultVideo.length === 2">
                        <el-col v-for="(video, index) in resultVideo" :key="index" :span="12">
                            <div class="double-video">
                                <DouyinShow :item="video" v-if="video" />
                            </div>
                        </el-col>
                    </template>

                    <!-- 三个及以上视频时 -->
                    <template v-else>
                        <el-col v-for="(video, index) in resultVideo" :key="index" :span="8" class="multi-video">
                            <div class="multi-video">
                                <DouyinShow :item="video" v-if="video" />
                            </div>
                        </el-col>
                    </template>
                </el-row>
            </div>
        </div>

        <div class="step-buttons">
            <div class="generate-row">
                <el-input-number v-model="formData.createNum" :min="1" :max="10" class="count-input" size="default"
                    disabled />
            </div>
            <div>
                <el-button v-if="activeStep == 0" type="primary" @click="handleGenerate">生成视频</el-button>
                <el-button v-if="activeStep == 1" type="default" @click="back">返回</el-button>
                <el-button v-if="activeStep == 1" type="primary" @click="handlePublish">授权发布</el-button>
            </div>
        </div>
    </div>
    <MyDialog v-model="showChooseImgDialog" title="选择图片素材" width="75%">
        <!-- 这里可以传入任何自定义内容 -->
        <SourcePictureNew :multiple="false" ref="sourcePictureNewRef1" @confirm="imgMaterialChoosed"/>
        <!-- 自定义底部 -->
        <template #footer>
            <el-button @click="showChooseImgDialog = false">取消</el-button>
            <el-button type="primary" @click="imgMaterialChoosed">确定</el-button>
        </template>
    </MyDialog>
    <CustomLoading :loading="isLoading" :texts="loadingTexts" :icon-size="40" />

    <!-- 发布设置弹窗 -->
    <MyDialog
      v-model="showPublishDialog"
      title="发布设置"
      width="600px"
      :modal="true"
      :close-on-click-modal="false"
      @confirm="handlePublishConfirm"
      @cancel="handlePublishCancel"
    >
      <div class="publish-form">
        <!-- 发布类型 -->
        <div class="form-section">
          <div class="section-label">发布类型</div>
          <div class="publish-type-buttons">
            <button
              :class="['type-btn', publishForm.publishType === 'douyin' ? 'active' : '']"
              @click="publishForm.publishType = 'douyin'"
            >
              抖音发布
            </button>
<!--            <button
              :class="['type-btn', publishForm.publishType === 'xiaohongshu' ? 'active' : '']"
              @click="publishForm.publishType = 'xiaohongshu'"
            >
              小红书发布
            </button>-->
          </div>
        </div>

        <!-- 活动名称 -->
        <div class="form-section">
          <div class="section-label">活动名称</div>
          <el-input
            v-model="publishForm.activityName"
            placeholder="请输入活动名称"
            class="form-input"
          />
        </div>

        <!-- 标题 -->
        <div class="form-section">
          <div class="section-label">标题</div>
          <el-input
            v-model="publishForm.title"
            type="textarea"
            :rows="2"
            placeholder="发布时标题会自动携带(数字人请手动录入)"
            class="form-input"
          />
        </div>

        <!-- 话题 -->
        <div class="form-section">
          <div class="section-label">话题</div>
          <el-input-tag
            v-model="publishForm.topic"
            placeholder="请输入话题，按回车添加"
            class="form-input"
          />
          <div class="form-tip">
            <el-icon><InfoFilled /></el-icon>
            一行代表一个话题
          </div>
        </div>

        <!-- 挂载 -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin'">
          <div class="section-label">挂载</div>
          <div class="mount-buttons">
            <button
              :class="['mount-btn', publishForm.mount === 'none' ? 'active' : '']"
              @click="publishForm.mount = 'none'"
            >
              无
            </button>
            <button
              :class="['mount-btn', publishForm.mount === 'poi' ? 'active' : '']"
              @click="publishForm.mount = 'poi'"
            >
              POI地址/团购
            </button>
            <button
              :class="['mount-btn', publishForm.mount === 'miniprogram' ? 'active' : '']"
              @click="publishForm.mount = 'miniprogram'"
            >
              小程序
            </button>
          </div>
        </div>
        <!-- POI -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'poi'">
          <div class="section-label">挂载内容</div>
          <div style="display: flex; gap: 8px; width: 100%;">
            <el-input v-model="publishForm.poi1" placeholder="请输入关键词" style="flex:1;" />
            <el-input v-model="publishForm.poi2" placeholder="请输入城市" style="flex:1;" />
            <el-button icon="el-icon-search" type="primary" @click="handleChooseCityKeyWord">搜索</el-button>
          </div>
          <div style="margin-top: 8px;">
            <el-select v-model="publishForm.poiSelect" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <!-- 小程序 -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'miniprogram'">
          <div class="section-label">挂载内容</div>
          <el-input v-model="publishForm.miniId" placeholder="例如：ttef91b112671b152ba ID" style="margin-bottom: 8px;" />
          <el-input v-model="publishForm.miniTitle" placeholder="请输入小程序标题" style="margin-bottom: 8px;" />
          <el-input v-model="publishForm.miniPath" placeholder="例如：path/pages/index" />
        </div>
        <!-- 数据获取 -->
        <!-- <div class="form-section" v-if="publishForm.publishType === 'douyin'">
          <div class="section-label">数据获取</div>
          <div class="data-acquisition-row">
            <el-switch
              v-model="publishForm.dataAcquisition"
              active-color="#409EFF"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              打开数据获取后,需要用户确定授权
            </div>
          </div>
        </div> -->

        <!-- 随机图片数量 -->
        <div class="form-section">
          <div class="section-label">随机图片数量</div>
          <el-input-number
            v-model="publishForm.picnums"
            :min="0"
            :max="9999"
            class="scan-limit-input"
          />
        </div>

        <!-- 扫码数量限制 -->
        <div class="form-section">
          <div class="section-label">扫码数量限制</div>
          <el-input-number
            v-model="publishForm.scanCodeLimit"
            :min="0"
            :max="9999"
            class="scan-limit-input"
          />
        </div>
      </div>
    </MyDialog>

    <!-- 二维码显示弹窗 -->
    <MyDialog
      v-model="showQrCodeDialog"
      title="请扫码发布"
      width="600px"
      :modal="true"
      :close-on-click-modal="false"
      @confirm="handleQrCodeConfirm"
      @cancel="handleQrCodeConfirm"
    >
      <!-- 二维码显示区域 -->
      <div class="form-section" v-if="douyinQrCode || redBookAndroidQrCode || redBookIOSQrCode">
        <div class="qr-code-container">
          <!-- 抖音二维码 -->
          <div v-if="douyinQrCode" class="qr-code-item">
            <div class="qr-code-title">抖音二维码</div>
            <img :src="douyinQrCode" alt="抖音二维码" class="qr-code-image" />
          </div>
          <!-- 小红书Android二维码 -->
          <div v-if="redBookAndroidQrCode" class="qr-code-item">
            <div class="qr-code-title">小红书Android二维码</div>
            <img :src="redBookAndroidQrCode" alt="小红书Android二维码" class="qr-code-image" />
          </div>
          <!-- 小红书iOS二维码 -->
          <div v-if="redBookIOSQrCode" class="qr-code-item">
            <div class="qr-code-title">小红书iOS二维码</div>
            <img :src="redBookIOSQrCode" alt="小红书iOS二维码" class="qr-code-image" />
          </div>
        </div>
      </div>
    </MyDialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import MyDialog from '../../common/MyDialog.vue';
import SourcePictureNew from '../../videoWarehouse/SourcePictureNew.vue';
import utils from '../../../utils/utils';
import axiosUtil from '../../../axios-util/axios-util';
import CustomLoading from '../../common/CustomLoading.vue';
import DouyinShow from '../DouyinShow.vue';
import { InfoFilled, Plus } from '@element-plus/icons-vue';
import type { PictureContent } from '../../../utils/types';
import QRCode from 'qrcode';

//主题控制light  dark
const theme = utils.getTheme();

// 对话框状态控制
// 图片素材选择对话框
const showChooseImgDialog = ref(false);
// 视频素材选择对话框
const sourcePictureNewRef1 = ref(null);

// 默认选中720P
// 分辨率选项
const resolutionOptions = ref([
    {
        value: '480P',
        label: '480P'
    },
    {
        value: '720P',
        label: '720P'
    }
]);

// 要提交的数据结构
const formData = reactive<any>({
    // 视频分辨率
    resolution: '480P',
    // prompt 描述
    description: '',
    // 图片素材
    imgMaterial: '',
    // 视频素材
    videoMaterial: '',
    // 创建视频数量
    createNum: 1,
    // 任务标题
    taskTitle: '',
})
const resultVideo = ref<PictureContent[]>([]);
// 加载中状态控制
const isLoading = ref<boolean>(false);
const loadingTexts = ref<string[]>([
    '正在处理您的请求...',
    '数据加载中...',
    '请耐心等待...',
    '系统正在处理...',
    '即将完成...'
]);

// 当前步骤
const activeStep = ref(0);

// 发布设置弹窗相关
const showPublishDialog = ref(false)
const publishForm = ref({
  publishType: 'douyin', // douyin 或 xiaohongshu
  activityName: '',
  title: '',
  topic: [], // Changed to array for InputTag
  mount: 'none', // none, poi, miniprogram
  dataAcquisition: false,
  scanCodeLimit: 0,
  picnums: 0,
  // POI相关字段
  poi1: '',
  poi2: '',
  poiSelect: '',
  // 小程序相关字段
  miniId: '',
  miniTitle: '',
  miniPath: ''
})

const cityData = ref([])

// 二维码相关
const showQrCodeDialog = ref(false)
const douyinQrCode = ref("")
const redBookAndroidQrCode = ref("")
const redBookIOSQrCode = ref("")

// 生成二维码的函数
const generateQRCode = async (text: string): Promise<string> => {
  try {
    const qrCodeDataUrl = await QRCode.toDataURL(text, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
    return qrCodeDataUrl
  } catch (error) {
    console.error('生成二维码失败:', error)
    return ''
  }
}

// 选择图片素材
const chooseImgMaterial = () => {
    showChooseImgDialog.value = true;
}

// 图片素材选择完成处理
const imgMaterialChoosed = () => {
    let imgUrl = sourcePictureNewRef1.value.getSelectMateria();
    if (imgUrl.length === 0) {
        ElMessage.error('请选择图片');
        return;
    }
    // 回显图片
    formData.imgMaterial = imgUrl;
    showChooseImgDialog.value = false;
}

const handleGenerate = async () => {
    console.log('生成视频', formData);
    if (!formData.description) {
        ElMessage.error('请输入描述');
        return;
    }
    if (!formData.imgMaterial || formData.imgMaterial.length == 0) {
        ElMessage.error('请选择图片素材');
        return;
    }
    formData.taskTitle = await utils.openTaskTitleBox();
    if (typeof formData.imgMaterial != 'string') {
        formData.imgMaterial = formData.imgMaterial[0];
    }
    isLoading.value = true;
    const response = await axiosUtil.post('api/aliyun_tongyi/wan_xiang/create_iv_default_task', formData);
    if (response.data.code === 1) {
        const id = response.data.data.id;
        let timer = setInterval(() => {
            axiosUtil.post('api/aliyun_tongyi/wan_xiang/query_itov_task', {
                id: id,
            }).then(responseSon => {
                if (responseSon.data.code !== 1) {
                    ElMessage.error('生成视频出错');
                    isLoading.value = false;
                    return;
                }
                if (responseSon.data.data.all_handle === 2) {
                    ElMessage.error('生成视频出错');
                    clearInterval(timer);
                    isLoading.value = false;
                } else if (responseSon.data.data.all_handle === 1) {
                    // 生成成功
                    clearInterval(timer);
                    // 右侧显示视频
                    resultVideo.value = responseSon.data.data.list.map(v => {
                        return  {
                            id: v.id,
                            bg: '',
                            avatar: 'https://img2.baidu.com/it/u=2328777830,2201725034&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                            likes: 9999,
                            comments: 9999,
                            favorites: 9999,
                            shares: 9999,
                            author: '@智慧AI测试',
                            desc: '图生视频',
                            url: v.url
                        }
                    });
                    isLoading.value = false;
                    // 跳到第二步骤页面
                    activeStep.value = 1;
                }
            })
        }, 3000);
    } else {
        ElMessage.error('生成视频出错');
        isLoading.value = false;
    }
}

function back() {
    utils.openConfirmBox('info', '确认返回吗？', '返回后所有填写的内容将丢失', () => {
        activeStep.value = 0;
    });
}

// 发布设置弹窗处理方法
const handlePublishConfirm = async () => {
  console.log('发布设置确认', publishForm.value)
  let videos = ''
  let arr = []
  if(resultVideo.value.length > 0) {
    resultVideo.value.forEach(video => {
      arr.push(video.url)
    })
  }else {
    ElMessage.warning('请先生成视频')
    return
  }
  videos = arr.join(",")

  // TODO: 在这里处理发布逻辑
  let url = ''
  let data: any = {
    "title": publishForm.value.activityName,
    "video_text": publishForm.value.title,
    "video_text_keyword": publishForm.value.topic,
    "platform_type": "none",
    "micro_app_info": {
      "micro_app_id": "",
      "micro_app_title": "",
      "micro_app_url": ""
    },
    "open_data": publishForm.value.dataAcquisition?1:0,
    "video_list": videos,
    "max_release_num": publishForm.value.scanCodeLimit,
    "type": "video",
    "photos": "",
    "photos_num": publishForm.value.picnums,
    "id": ""
  }

  if(publishForm.value.publishType === 'douyin'){
    url = 'api/scan_publish/douyin/save';
    // 处理POI挂载
    if(publishForm.value.mount === 'poi'){
      if(!publishForm.value.poiSelect){
        ElMessage.warning("请先选择数据")
        return
      }else {
        const selectArr = cityData.value.find(item => item.value === publishForm.value.poiSelect)
        if(selectArr){
          data.mount_type = 'poi'
          data.poi_id = selectArr.value
          data.poi_name = selectArr.label
        }
      }
    }

    // 处理小程序挂载
    if(publishForm.value.mount === 'miniprogram'){
      if(!publishForm.value.miniId){
        ElMessage.warning("请先输入小程序ID")
        return
      }
      if(!publishForm.value.miniTitle){
        ElMessage.warning("请先输入标题")
        return
      }
      if(!publishForm.value.miniPath){
        ElMessage.warning("请先输入路径")
        return
      }
      data.mount_type = 'mini_program'
      data.micro_app_info.micro_app_id = publishForm.value.miniId
      data.micro_app_info.micro_app_title = publishForm.value.miniTitle
      data.micro_app_info.micro_app_url = publishForm.value.miniPath
    }
  }else {
    url = 'api/scan_publish/xhs/save'
  }

  try {
    const response = await axiosUtil.post(url, data)
    if(response.data.code === 1) {
      ElMessage.success(response.data.msg)
      const qr_code = response.data.data.qr_code
      if(publishForm.value.publishType === 'douyin'){
        // 将地址转换为二维码图片
        douyinQrCode.value = await generateQRCode(qr_code)
      }else {
        // 将地址转换为二维码图片
        redBookAndroidQrCode.value = await generateQRCode(qr_code.android)
        redBookIOSQrCode.value = await generateQRCode(qr_code.ios)
      }
      showQrCodeDialog.value = true
      showPublishDialog.value = false
    }else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    ElMessage.error('发布失败，请重试')
  }
}

const handlePublishCancel = () => {
  showPublishDialog.value = false
  // 重置表单
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: false,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }

  // 清空城市数据
  cityData.value = [];
}

const handleQrCodeConfirm = () =>{
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: false,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }
  douyinQrCode.value = ""
  redBookAndroidQrCode.value = ""
  redBookIOSQrCode.value = ""
  showQrCodeDialog.value = false;

  // 清空城市数据
  cityData.value = [];
}

const handleChooseCityKeyWord = async () => {
  if(!publishForm.value.poi1){
    ElMessage.warning("请输入关键词")
    return
  }
  if(!publishForm.value.poi2){
    ElMessage.warning("请输入城市")
    return
  }
  try {
    const res = await axiosUtil.post('api/scan_publish/douyin/search_poi', {
      "keyword": publishForm.value.poi1,
      "city": publishForm.value.poi2
    })
    if(res.data.code){
      cityData.value = []
      res.data.code.forEach(item=>{
        const son = {
          value: item.poi_id,
          label: item.province  + item.city + item.district + item.address,
        }
        cityData.value.push(son)
      })
    }
  } catch (error) {
    ElMessage.error('搜索POI失败，请重试')
  }
}

// 发布视频事件
const handlePublish = () => {
    console.log('点击授权发布按钮')
    showPublishDialog.value = true
    // 发布前清空之前的二维码数据
    douyinQrCode.value = "";
    redBookAndroidQrCode.value = "";
    redBookIOSQrCode.value = "";
}

</script>

<style scoped>
.resolution-select {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}
.three-step-container {
    height: 100%;
    padding: 20px;
    --el-text-color-primary: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
    --el-fill-color-light: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.step-content {
    height: calc(100% - 70px);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.step-one,
.step-two {
    height: 100%;
    display: flex;
    gap: 20px;
}

.left-content,
.right-content {
    height: 100%;
    flex: 1;
    font-size: 14px;
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.left-content img,
.left-content video {
    width: 100%;
    height: auto;
}

.step-buttons {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.area-container {
    height: 100%;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"');
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
    box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
    transition: all 0.3s ease;
    padding: 15px;
}

.area-container:hover {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)"');
    box-shadow: 0 6px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.25)"');
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"');
}

.image-section {
    display: flex;
    flex-direction: column;
    height: 180px;
}

.select-section {
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.input-section {
    /* height: 100%; */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.section-title {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
    font-size: 14px;
    font-weight: 500;
}

.section-title span {
    font-size: 12px;
    color: #d5d5d5;
}

.upload-img {
    min-height: 0; /* 关键！允许缩小到0 */
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    box-shadow: var(--el-box-shadow-dark);
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.description-input {
    flex: 1;
    min-height: 0;
    width: 100%;
    background-color: transparent;
    /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"'); */
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
    border-radius: 4px;
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
    padding: 10px;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
}

.description-input:focus {
    outline: none;
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
    box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
}

.description-input::placeholder {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.center-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.img-con {
    display: flex;
    flex-direction: row;
    gap: 15px;
    height: 100%;
}

.img-con .img-sec {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.img-con .param-sec {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 55%;
    height: 100%;
}

.generate-row {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.count-input {
    width: 120px;
}

.count-input :deep(.el-input-number__decrease),
.count-input :deep(.el-input-number__increase) {
    background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.4)" : "rgba(0, 102, 204, 0.5)"');
    border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.3)" : "rgba(0, 204, 255, 0.4)"');
    color: #fff;
}

.count-input :deep(.el-input-number__decrease:hover),
.count-input :deep(.el-input-number__increase:hover) {
    background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.6)" : "rgba(0, 102, 204, 0.7)"');
    border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.5)" : "rgba(0, 204, 255, 0.6)"');
}

.count-input :deep(.el-input__wrapper) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
    box-shadow: 0 0 0 1px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"');
}

.count-input :deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)"');
}

.count-input :deep(.el-input__inner) {
    color: #fff;
}

.single-video {
    width: 100%;
    height: 100%;
    padding: 10px;
    /* 单个视频时的高度 */
}

.double-video {
    width: 100%;
    height: 300px;
    /* 两个视频时的高度 */
}

.multi-video {
    margin-bottom: 20px;
}

:deep(.el-select__placeholder) {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

/* 响应式调整 */
@media (max-width: 992px) {
    .el-col {

        /* 在小屏幕上，大于2个视频时每行显示2个 */
        &:nth-child(n+3) {
            margin-top: 20px;
        }
    }
}

@media (max-width: 768px) {
    .el-col {
        /* 在更小的屏幕上，所有情况都单列显示 */
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* 发布设置弹窗样式 */
.publish-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 24px;
}

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.publish-type-buttons {
  display: flex;
  gap: 12px;
}

.type-btn {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.type-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.type-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.form-input {
  width: 100%;
}

.form-tip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.mount-buttons {
  display: flex;
  gap: 12px;
}

.mount-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
}

.mount-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.mount-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.data-acquisition-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scan-limit-input {
  width: 120px;
}

/* 二维码显示样式 */
.qr-code-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

.qr-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.qr-code-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

.qr-code-image {
  width: 150px;
  height: 150px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
